// 模块内副标题样式
@mixin subtitle {
  font-size: 1rem;
  color: $light3Grey;
  height: 1.125rem;
  line-height: 1.125rem;
  font-family: "Helvetica-regular";
}

// 图表标题
@mixin chartTitle {
  font-size: 0.75rem;
  line-height: 0.75rem;
  color: $light2Grey;
  font-family: "Helvetica-regular";
}

// 白色透明盒子
@mixin whiteBox {
  background-color: rgba($color: $white, $alpha: 0.1);
  border-radius: 0.3125rem;
}

// 按钮
@mixin btn {
  // width: 3.125rem;
  height: 1rem;
  background-color: rgba($color: $lightGrey, $alpha: 0.2);
  padding: 0 0.3125rem;
  font-size: 0.75rem;
  color: $lightGrey;
  line-height: 1rem;
  cursor: pointer;
  margin-left: 0.1875rem;
  text-align: center;
}

// 类型标签
@mixin tag-btn($color: #00fdff) {
  display: inline-block;
  text-align: center;
  padding: 0rem 0.4375rem;
  font-size: 0.75rem;
  height: 1rem;
  line-height: 1rem;
  color: $color;
  background-color: rgba($color: $color, $alpha: 0.25);
}

// 单位
.unit-text {
  margin-left: 0.3125rem;
  font-size: 0.75rem;
  line-height: 0.875rem;
  color: $darkGrey;
}

.info-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 10rem;
  height: 2.75rem;
  border-radius: 0.25rem;
  background-color: $itemBg;
  padding: 0 0.625rem;
  box-sizing: border-box;
  margin-bottom: 0.625rem;
  font-size: $commonContentText;
  color: $light2Grey;
  .alarm-text {
    font-size: $bigHeadingsText;
    color: $yellow;
  }
  .fault-text {
    font-size: $bigHeadingsText;
    color: $red;
  }
}

.tips-tab-wrap {
  display: flex;
  .tips-tab-item {
    width: 2.8125rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: $auxiliaryText;
    color: $light2Grey;
    margin-left: 0.625rem;
    .sign {
      width: 0.9375rem;
      height: 0.5625rem;
      &.grey {
        background: $lightGrey;
      }
      &.green {
        background: $green;
      }
      &.red {
        background: $red;
      }
    }
  }
}

.primary-btn {
  text-align: center;
  color: $cyan;
  border-radius: 0.125rem;
  background-color: #023d4b;
  border: 0.0625rem solid #bbb;
  box-sizing: border-box;
}

// 指挥调度-告警统计分析左侧侧边栏按钮-tooltip
.sidebar-poper {
  background-color: rgba(0, 0, 0, 0.5) !important;
  width: 5.625rem;
  text-align: center;
}

// 切换tab
@mixin tab($width: 3rem, $height: 1.125rem) {
  display: flex;
  &-item {
    &:hover {
      cursor: pointer;
    }
    margin-left: 0.3125rem;
    // width: $width;
    padding: 0px 4px;
    // border-radius: 4px;
    height: $height;
    text-align: center;
    line-height: $height;
    font-size: 0.75rem;
    color: #adadad;
    border-radius: 0.125rem;
    background-color: rgba($color: #adadad, $alpha: 0.2);
    &.active {
      color: $cyan;
      background-color: $tagBgActive;
    }
  }
}

@mixin flex-between-center {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

@mixin backgroundImage($url) {
  background-image: url($url);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: 0% 0%;
}

// 决策分析数据面板日期切换tab
@mixin date-tab {
  margin-right: 1.8125rem;
  &-item {
    padding: 0rem 0.9375rem !important;
    float: left;
    text-align: center;
    font-size: 0.75rem;
    height: 0.75rem; // 字体高度和内容高度一直 line-height为1
    line-height: 1;
    color: #adadad;
    border-radius: 0.125rem;
    &:hover {
      cursor: pointer;
    }
    &.active {
      color: $cyan;
    }
  }
  &-item:nth-of-type(-n + 2) {
    border-right: 0.0625rem solid #adadad;
  }
}

// 供水泵房样式
.water-name-box {
  width: 16.5rem;
  height: 3rem;
  line-height: 3rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.9375rem;
  box-sizing: border-box;
  font-size: 0.875rem;
  color: #f8f8f8;
  border-radius: 0.25rem;
  background: rgba($color: $white, $alpha: 0.1);
  margin-top: 0.625rem;
  .value {
    font-size: 1rem;
    font-weight: 600;
  }
  .state {
    font-size: 0.875rem;
    &.green {
      color: #57ffaa;
    }
    &.grey {
      color: #adadad;
    }
  }
  img {
    width: 1.125rem;
    margin-right: 0.4375rem;
    transform: translateY(0.3125rem);
  }
}
.water-item-box {
  width: 48%;
  height: 4.5625rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  background: rgba($color: $white, $alpha: 0.1);
  margin-top: 0.625rem;
  border-radius: 0.25rem;
  padding: 0.5rem 0;
  color: #f8f8f8;
  font-size: 0.875rem;
  box-sizing: border-box;
  &.small {
    height: 3.4375rem;
  }
  &.middle {
    height: 3.75rem;
  }
  .value {
    font-weight: 600;
    font-size: 1rem;
  }
}
.water-flow-box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  height: 4.125rem;
  background: rgba($color: $white, $alpha: 0.1);
  border-radius: 0.25rem;
  padding: 0.625rem 0.9375rem;
  font-size: 0.875rem;
  color: #f8f8f8;
  margin-top: 0.3125rem;
  .flow-item {
    height: 1.5625rem;
    line-height: 1.5625rem;
    display: flex;
    justify-content: space-between;
    .flow-value {
      font-size: 1rem;
      font-weight: 600;
    }
  }
}
.tags-wrap {
  height: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.9375rem;
  .tag-item {
    display: flex;
    align-items: center;
    color: $light2Grey;
    margin-right: 0.625rem;
    .tag-color {
      width: 0.9375rem;
      height: 0.5625rem;
      margin-right: 0.4375rem;
      &.green {
        background-color: $green;
      }
      &.grey {
        background-color: rgba(173, 173, 173, 100);
      }
      &.red {
        background-color: $red;
      }
    }
  }
}
